<!--<style lang="scss">-->

<!--</style>-->

<!--<template>-->
<!--  <div class="page-home">-->
<!--&lt;!&ndash;    {{state.map.size}}&ndash;&gt;-->
<!--    <z-space vertical>-->
<!--      <z-space vertical>-->
<!--        <z-search-table :def="dataTable">-->
<!--          <template #table__action="scope">-->
<!--            <template v-if="scope.id === 'slot'">-->
<!--              <template v-if="checkSelected(scope.row.id)">-->
<!--                <el-button type="danger"-->
<!--                           @click="unSelectRow(scope.row.id)">取消</el-button>-->
<!--              </template>-->
<!--              <template v-else>-->
<!--                <el-button type="text" @click="selectRow(scope)">-->
<!--                  选择-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </template>-->
<!--          </template>-->
<!--        </z-search-table>-->
<!--        <z-space vertical>-->
<!--          当前选择-->
<!--         <z-space v-if="state.selected"-->
<!--                  row-gap="10px"-->
<!--                  :grid="true" :wrap="true" not-last>-->
<!--           <el-tag v-for="item in state.selected" :key="item[0]"-->
<!--                   @close="handleClose(item)"-->
<!--                   closable>{{item && item[1] && item[1].sourceDbName}}</el-tag>-->
<!--         </z-space>-->
<!--        </z-space>-->
<!--      </z-space>-->
<!--      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>-->

<!--      <h3>ZSearchTable 参数</h3>-->
<!--      <doc-props :data="doc.props"></doc-props>-->
<!--    </z-space>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {useDataTable} from "@/zpkgs/hooks/datatable";-->
<!--import VueCodeMirror from "@example/components/VueCodeMirror";-->
<!--import DocProps from "@example/plugins/example/components/DocProps";-->

<!--export default {-->
<!--  components: {DocProps, VueCodeMirror},-->
<!--  data() {-->
<!--    return {-->
<!--      doc: {-->
<!--        props: [-->
<!--          {-->
<!--            name: 'autoInit',-->
<!--            type: 'Boolean',-->
<!--            defVal: 'true',-->
<!--            desc: '默认自动加载数据'-->
<!--          },-->
<!--          {-->
<!--            name: 'onInit',-->
<!--            type: 'Function',-->
<!--            defVal: 'null',-->
<!--            desc: '用户初始化后回调'-->
<!--          }-->
<!--        ]-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  setup(props, ctx) {-->

<!--    function init() {-->
<!--      return useDataTable({-->
<!--        defaultUrl: '/api/list',-->
<!--        request: globalThis.Req,-->
<!--        columnDefMap: {-->
<!--          sourceDbName: {-->
<!--            // search: {-->
<!--            //   type: 'string',-->
<!--            //   ui: { widget: 'CusInput' },-->
<!--            // },-->
<!--            formatter(row, column, cellValue) {-->
<!--              return cellValue +'x';-->
<!--            }-->
<!--          }-->
<!--        },-->
<!--        appendColumns: [-->
<!--          {-->
<!--            width: 90,-->
<!--            label: '操作',-->
<!--            actions: [-->
<!--              {-->
<!--                id: 'slot',-->
<!--                useSlot: true-->
<!--              }-->
<!--            ]-->
<!--          }-->
<!--        ],-->
<!--        search: {-->
<!--          slots: {-->
<!--            object_beforeend: `-->
<!--  <z-space  column-gap="3px"  style="margin-left: 10px;">-->
<!--    <el-button @click="zform__callEvent('form-submit', scope, $event)"">搜索</el-button>-->
<!--   <el-button @click="zform__reset(scope, $event)"">重置</el-button>-->
<!--  </z-space>-->
<!--  `-->
<!--          },-->
<!--        }-->
<!--      });-->
<!--    }-->


<!--    // let js = init.toString().replace(`function init()`, '')-->

<!--    let def = {-->
<!--      tpl: `<template>-->
<!--   <search-table :def="dataTable"></search-table>-->
<!--</template>`,-->
<!--      js: `-->
<!--return useDataTable({-->
<!--  defaultUrl: '/api/list',-->
<!--  request: globalThis.Req,-->
<!--  columnDefMap: {-->
<!--    sourceDbName: {-->
<!--      formatter(row, column, cellValue) {-->
<!--        return cellValue ;-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  search: {-->
<!--    slots: {-->
<!--      object_beforeend: \`-->
<!--<z-space style="margin-left: 10px;">-->
<!--<el-button @click="zform__callEvent('form-submit', scope, $event)"">搜索</el-button>-->
<!--</z-space>-->
<!--\`-->
<!--    },-->
<!--  }-->
<!--});-->
<!--    `-->
<!--    }-->

<!--    const {reactive} = vueCompositionAPI-->

<!--    let dataTable = init();-->

<!--    let state = reactive({-->
<!--      selected: [],-->
<!--      map: new Map()-->
<!--    })-->

<!--    function selectRow(scope) {-->
<!--      // console.log(scope)-->
<!--      state.selected.push(-->
<!--          [scope.row.id, scope.row]-->
<!--      )-->
<!--      // state.map.set(scope.row.id, scope.row)-->
<!--    }-->

<!--    function unSelectRow(id) {-->
<!--      let index = state.selected.findIndex(v => v[0] === id)-->
<!--      // console.log(index)-->
<!--      if (index > -1) {-->
<!--        state.selected.splice(index, 1)-->
<!--      }-->
<!--    }-->

<!--    function checkSelected(id) {-->

<!--      if (Array.isArray(state.selected)) {-->
<!--        let ids = state.selected.map(v => v[0])-->
<!--        if (ids.includes(id)) {-->
<!--          return true-->
<!--        }-->
<!--      }-->
<!--      return false-->
<!--    }-->

<!--    function handleClose(item) {-->
<!--      // console.log(item)-->
<!--      unSelectRow( item[0])-->
<!--    }-->

<!--    return {-->
<!--      def,-->
<!--      dataTable,-->
<!--      state,-->
<!--      unSelectRow,-->
<!--      handleClose,-->
<!--      checkSelected,-->
<!--      selectRow,-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
